Azure SSO Integration

Done with a React front-end application and a Spring Boot back-end.

Implementation was quite straight forward, and enabled a JWT token to be used to authorize requests from the front-end to the back-end.

Requirements

Cloud

You'll need an Active Directory initially. From here you create two app registrations, one for the API and one for the App.

API

In the API configuration you should add scopes via Expose an API. Add an Application URI here then add a scope such as User.Access. This should give you something like this:

Below this you should also add the App as a client application.

App

The App authentication should be set up to use Access Tokens (used for implicit flows) and include suitable redirect URIs for login callbacks.

You should then go to API Permissions and add the scope we saw above as a permission.

This should now allow a token to be created from the front-end using the scope defined in the API, which will then be decoded by Spring Boot.

Front-end

Used the new provided packages from Azure, which provide some handy hooks for authentication if you're using functional components.

• @azure/msal-browser
• @azure/msal-react

Also provide some basic auth config:

Getting and using a token is also straightforward. The below example uses the scope from the file above to request a token - different tokens could be substituted here:

Back-end

You'll need a couple of dependencies for Spring Boot and Azure to work nicely:

• org.springframework.boot:spring-boot-starter-security
• com.azure.spring:azure-spring-boot-starter-active-directory
• org.springframework.boot:spring-boot-starter-oauth2-resource-server

The configuration is minimal for newer versions of Spring Boot:

Remember to add this to your main application if you didn't already:

You can then check for authorities like this:

I needed the following in application.properties in order for this to work properly: